@import "@/lib/reset.scss";
body,html,#root{
  @include rect(100%,100%)
}


.box{
  @include rect(100%,100%);
  nav{
    @include rect(100%,0.94rem);
    box-sizing: border-box;
    padding: 0.14rem 0.12rem;
    ul{@include rect(100%,100%);
      @include flexbox();
    justify-content: space-between;
    align-items: center;
    a{
      @include flex();
      @include flexbox();
      height: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      span{
        display: block;
        @include rect(0.44rem,0.44rem);
        background-image: url('http://img-tailor.11222.cn/pm/book/operate/2017022317384553.png');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 0.44rem auto;
      }
      .home_s1{
        background-position: 0 -0.44rem;
      }
      .home_s2{
        background-position: 0 -0.88rem;
      }
      .home_s3{
        background-position: 0 -1.32rem;
      }
      .home_s4{
        background-position: 0 -1.76rem;
      }
    }

    }
  }

.home_undernav{
  @include rect(100%,0.42rem);
  box-sizing: border-box;
  padding: 0.14rem 0.14rem;
  font-size: 16px;

    @include flexbox();
    align-items: center;
    justify-content: space-between;

}
.home_img{
  @include rect(100%,0.64rem);
  img{
    @include rect(100%,100%)
  }
}
.home_title{
  @include rect(100%,0.32rem);
  box-sizing: border-box;
  padding: 0.16rem 0 0 0 ;

  @include flexbox();
  span {
    display: block;
    @include rect(4px,100%);
    background: green;
    margin-right: 0.2rem;

  }
  p{
    font-size: 16px;
    line-height: 1;
  }
}
.jingpinlist{
  @include rect(100%,1.86rem);
  box-sizing: border-box;
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid #eeeeee;
  ul{
    @include rect(100%,100%);

    @include flexbox();

    a{
     @include flex();
      @include flexbox();
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 16px 0 0;
      color: #000000;
      div{
        @include rect(0.84rem,1.11rem)
      }
      img{@include rect(0.84rem,100%);
      }
    span{font-size: 14px;
        display: block;
        @include rect(100%,0.16rem);
      white-space: nowrap;
      overflow: hidden;
      text-overflow:ellipsis }
    }
  }

}
.change{
  @include rect(100%,0.48rem);
  @include flexbox();
  justify-content: center;
  align-items: center;
  border-bottom: 8px solid #eeeeee;
 span{
   display: block;
   margin-left: 5px;
   transform-origin: center center;
   transition: all 1s;
 }

}
.girllist2{
  @include flexbox();
  flex-direction: column;
}
.girllistbox{
  @include rect(100%,2.3rem);
  box-sizing: border-box;
  padding: 0 0 0 0.12rem;
  ul{
    @include rect(100%,100%);
    @include flexbox();
    flex-direction: column;
    a{
      @include rect(100%,0.77rem);
      box-sizing: border-box;
      padding: 0.12rem 0.12rem 0.12rem 0;
      @include flexbox();
      flex-direction: column;
      justify-content: space-around;
      border-bottom: #eeeeee;
      color: #000;
      div{
        @include flexbox();
        justify-content: space-between;

        p{
          @include flexbox();
          justify-content: space-between;
          width: 1.2rem;
          span{
            display: block;
            border-radius: 4px;

          }
          .stat_name{
            @include rect(0.35rem,100%);
            border:1px solid #dddddd;
            color: green;
            font-size: 0.12rem;
            text-align: center;
          }
          .first_cate_name{
            @include rect(0.65rem,100%);
            border:1px solid #dddddd;
            color: #bbbbbb;
            font-size: 0.12rem;
            text-align: center;
          }
        }
      }
      .introduction {
        font-size: 14px;
        display: block;
        @include rect(100%, 0.16rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        color: #bbbbbb;

      }
    }
  }
}
.home_changxiaoone{
  @include rect(100%,1.45rem);
  box-sizing: border-box;
  padding: 0.12rem;
  @include flexbox();

  .image{
    @include rect(0.84rem,100%);
    margin-right: 0.15rem;

  }
  .detail{
    @include  flex();
    @include flexbox();
    flex-direction: column;
    color: #999;
    p{
      font-size: .14rem;

      color: #999;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin: 0.06rem 0;
      max-height: 100%;
    }
    .muchspan{
      @include flexbox();
      span{
        display: block;
        padding: 3px;
        border: 1px solid #e0e0e0;
        border-radius: 3px;
        margin-right: 5px;
        font-size: 12px;
      }
    }
  }
}
.home_changxiaotwo{
  @include rect(100%,auto);
  box-sizing: border-box;
  padding: 0 0 0 0.12rem;
  a{
    @include  rect(100%,0.52rem);
    box-sizing: border-box;
    padding: 0.12rem 0.12rem 0.12rem 0;
    border-bottom: 1px solid #eeeeee;
    @include flexbox();
    @include justify-content(space-between);
    color: #000000;
    div{
      @include flexbox();
      @include justify-content(space-between);
      span{
        margin-right: 0.12rem;
      }
    }
  }
}
  .shudanlist{
    @include rect(100%,auto);
    padding: 0 0 0 0.12rem;
    li{
      @include rect(100%,1.33rem);
      box-sizing: border-box;
      padding: 0.12rem 0.12rem 0.12rem 0;
      border-bottom: 1px solid #eeeeee;
      @include flexbox();
      @include justify-content(space-between);
      .shudantitle{
        @include flex();
        span{font-size: 0.16rem};
        p{  font-size: .14rem;

          color: #999;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin: 0.06rem 0;
          max-height: 100%;
        }
      }
      .shudanimage{
        @include rect(0.84rem,0.8rem);
        margin-left: 0.12rem;
        position: relative;
        overflow: hidden;
        .img1{
          left: 0;
          display: block;
          width: 0.4rem;
          height: 0.6rem;
          bottom: 0;
          z-index: 1;
          position: absolute;
        }
        .img2{
          width: 0.6rem;
          height: 0.8rem;
          bottom: 0;
          left: 50%;
          -webkit-transform: translate(-50%,0);
          transform: translate(-50%,0);
          z-index: 3;
          position: absolute;
        }
        .img3{
          content: ' ';
          display: inline-block;
          position: absolute;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          border: 1px solid rgba(0,0,0,.1);
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);

          z-index: 2;
          width: 0.4rem;
          height: 0.6rem;
        }
      }
    }

  }

  .homelist{
    @include rect(100%,auto);
    padding-left: 0.12rem;
    a{
      @include rect(100%,1.54rem);
      @include flexbox();
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0.12rem 0.12rem 0.12rem 0;
      overflow: hidden;
      border-bottom: 1px solid #eeeeee;
      color: #999999;
      .imgs{@include rect(0.84rem,1.12rem);
        margin-right: 0.12rem;}
      .discribe{
        @include flex();
        @include flexbox();
        flex-direction: column;
        .bookname{
          font-size: 0.16rem;
          color: #999999;
        }
        p{  font-size: .14rem;

          color: #999;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin: 0.06rem 0;
          max-height: 100%;}
      }
      .spans{
        @include flexbox();
        span{
          display: block;
          padding: 3px;
          border: 1px solid #eeeeee;
          border-radius: 3px;
          margin-right: 6px;
          font-size: 0.12rem;
          color: #999;
        }
        .fontcolor{
          color: green;
        }
      }
    }
  }
}
